<template>
    <!-- 顶部导航栏 -->
    <NavBar navbarTitle="搜索商品"></NavBar>
    <div class="category-page">
      <div class="page-search">
        <SvgIcon name="search" width="0.8em" height="0.8em" color="#44bb94" @click="search_btn"/>
        <input type="text" placeholder="搜索商品" v-model="searchStr" @keyup.enter.native="search_btn">
      </div>
      <!-- 搜索历史区域 -->
      <div class="page-history" v-if="historySearch.length > 0">
        <div class="history-icon">
            <div class="left">
                <SvgIcon name="wait" width="0.7em" height="0.7em" color="#b1b1b1"/>
                <span class="left-tip">最近搜索</span>
            </div>
            <SvgIcon class="right" name="delete" width="0.6em" height="0.6em" color="#979797" title="清空记录" @click="clearSearchHistory"/>
        </div>
        <div class="history-words">
            <span class="word" v-for="word,index in historySearch" :key="index" @click="tapHistoryWord(word)">{{ word }}</span>
        </div>
      </div>
      <div class="page-content"></div>
    </div>
</template>
  
<script setup lang='ts'>
import NavBar from '@/components/NavBar/NavBar.vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
import { ref, onMounted } from "vue";
//引入Vant4组件
import { showFailToast, showLoadingToast, showToast, showConfirmDialog } from "vant";
//@ts-ignore引入请求函数
import { reqProductListByName } from "@/api/product/index.ts";

//搜索输入框
let searchStr = ref("");
//搜索历史
let historySearch = ref([]);

//搜索按钮
function search_btn () {
    if(searchStr.value.trim() === '') return showToast("请输入关键字搜索商品..");
    //展示加载效果
    showLoadingToast({message: '加载中...',forbidClick: true});
    //发请求获取数据展示(暂时不做)
    //执行搜索后的相关流程
    setTimeout(() => {
        //进行相关提示
        showFailToast("未查询到相关商品数据..");
        //存储搜索记录(需判断是否和之前有重复)
        if(!historySearch.value.some(item => item === searchStr.value)){
            historySearch.value.unshift(searchStr.value);
            localStorage.setItem("search_history",JSON.stringify(historySearch.value));
        }
    }, 1500);
}
//清空搜索历史
function clearSearchHistory () {
    showConfirmDialog({message:'确定删除最近搜索记录吗？'})
    .then(() => {
        historySearch.value = [];
        localStorage.setItem("search_history","[]");
    })
    .catch(() => {
        // on cancel
    });
}
//点击搜索历史关键字
function tapHistoryWord (word:string) {
    searchStr.value = word;
}

//vue生命周期
onMounted(() => {
    //@ts-ignore获取本地的历史记录
    let history = JSON.parse(localStorage.getItem("search_history")) || [];
    historySearch.value = history;
})
</script>
  
<style scoped lang='less'>
.category-page{
    position: relative;
    top:47px;

    //顶部搜索区域
    .page-search{
        width:345px;
        height:32px;
        margin:15px;
        padding:0 10px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        background-color: #eff2f5;

        input{
            width: 280px;
            height: 24px;
            margin-left: 8px;
            border: none;
            outline: none;
            background-color: #eff2f5;
            color: #44bb94;
            font-size: 16px;

            &::placeholder{
                font-size: 14px;
                color:#44bb94;
            }
        }
    }
    //搜索历史区域
    .page-history{
        width:345px;
        height:80px;
        margin:0 15px;
        border-top: 1px solid #e0e8f6;
        display:flex;
        flex-direction: column;
        .history-icon{
            width:345px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                display: flex;
                align-items: center;
                .left-tip{
                    font-size: 12px;
                    color: #b1b1b1;
                }
            }
        }
        .history-words{
            margin: 5px 0;
            width:345px;
            display: flex;
            flex-wrap: wrap;
            .word{
                margin: 3px;
                font-size: 12px;
                padding: 3px 4px;
                background: #efefef;
                border-radius: 4px;
                color: #9195a3;
            }
        }
    }
    //主体内容区
    .page-content{
        width: 375px;
        height: 400px;
        margin-top:8px;
        padding-right:10px;
        position: relative;
        display: flex;
        overflow: scroll;
    }
}

</style>